<div *ngIf="(editable && (placeholder$ | async))" class="ngm-story-widget__placeholder absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
    <pac-placeholder-add></pac-placeholder-add>
    <span class="ngm-story-widget__placeholder-title">{{ 'Story.Widgets.IFrame.Title' | translate: {Default: 'iframe'} }}</span>
</div>

<ng-container *ngIf="options?.src">
    <iframe [id]="key"
        [title]="title"
        width="100%"
        height="100%"
        allowfullscreen
        [src]="src$ | async | safe:'resourceUrl'"

        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        >
    </iframe>
</ng-container>
